import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12 as QuickControls
import QtQuick.Controls 2.12


Rectangle {
    function showName(name, icon, caps, shift, ctrl, alt)
    {
        if (icon)
            return icon
        if (shift == 1 && name.length == 1) {
            return name.toUpperCase();
        }
        return name;
    }
    function background(name, cc, pressed, caps, shift, ctrl, alt) {
        if (name == "Shift" && shift == 1) {
            return "#999999"
        } else if (name == "Ctrl" && ctrl == 1) {
            return "#999999"
        } else if (name == "Alt" && alt == 1) {
            return "#999999"
        } else if (name == "Caps" && caps == 1) {
            return "#999999"
        } else {
            if (pressed == 1) {
                return "#999999"
            }
            return cc;
        }
    }
    function family(icon) {
        if (icon)
            return "FontAwesome"
        return "Consolas"
    }
    function size(name, icon) {
        if (icon) {
            if (name=='Up' || name=='Down' || name=='Left' || name=='Right') {
                return 1.0
            } else if (name=="Close") {
                return 0.9
            } else {
                return 0.8
            }
        }
        else if (name.length > 1) {
            return 0.7;
        }
        return 1;
    }

    id: root
    property int span: 0
    property int block: myDelegate.block
    property real rate: myDelegate.rate
    property int caps: myDelegate.caps
    property int shift: myDelegate.shift
    property int ctrl: myDelegate.ctrl
    property int alt: myDelegate.alt3543
    property int column: 31
    property int row: 5
    width: block * 31 + span * 14
    height: block * row * rate + span * row - 1

    color: red

    GridLayout {
        id: grid
        objectName: "grid"
        anchors.fill: parent
        columnSpacing: span;
        rowSpacing: span;
        rows: row
        columns: column
        Repeater {
            objectName:"rep"
            id: rep
            model: ListModel {
                ListElement { name: "Esc"; subname: ""; icon: ""; r: 0; c: 0; w: 2; ico: ""; cc: "#4e4e4e" }
                ListElement { name: "`"; subname: "~"; icon: ""; r: 0; c: 2; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "1"; subname: "!"; icon: ""; r: 0; c: 4; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "2"; subname: "@"; icon: ""; r: 0; c: 6; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "3"; subname: "#"; icon: ""; r: 0; c: 8; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "4"; subname: "$"; icon: ""; r: 0; c: 10; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "5"; subname: "%"; icon: ""; r: 0; c: 12; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "6"; subname: "^"; icon: ""; r: 0; c: 14; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "7"; subname: "&"; icon: ""; r: 0; c: 16; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "8"; subname: "*"; icon: ""; r: 0; c: 18; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "9"; subname: "("; icon: ""; r: 0; c: 20; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "0"; subname: ")"; icon: ""; r: 0; c: 22; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "-"; subname: "_"; icon: ""; r: 0; c: 24; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "="; subname: "+"; icon: ""; r: 0; c: 26; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "Back"; subname: ""; icon: "\uf177"; r: 0; c: 28; w: 3; ico: ""; cc: "#4e4e4e" }

                ListElement { name: "Tab"; subname: ""; icon: ""; r: 1; c: 0; w: 3; ico: ""; cc: "#4e4e4e" }
                ListElement { name: "q"; subname: ""; icon: ""; r: 1; c: 3; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "w"; subname: ""; icon: ""; r: 1; c: 5; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "e"; subname: ""; icon: ""; r: 1; c: 7; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "r"; subname: ""; icon: ""; r: 1; c: 9; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "t"; subname: ""; icon: ""; r: 1; c: 11; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "y"; subname: ""; icon: ""; r: 1; c: 13; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "u"; subname: ""; icon: ""; r: 1; c: 15; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "i"; subname: ""; icon: ""; r: 1; c: 17; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "o"; subname: ""; icon: ""; r: 1; c: 19; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "p"; subname: ""; icon: ""; r: 1; c: 21; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "["; subname: "{"; icon: ""; r: 1; c: 23; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "]"; subname: "}"; icon: ""; r: 1; c: 25; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "\\"; subname: "|"; icon: ""; r: 1; c: 27; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "Del"; subname: ""; icon: ""; r: 1; c: 29; w: 2; ico: ""; cc: "#4e4e4e" }

                ListElement { name: "Caps"; subname: ""; icon: ""; r: 2; c: 0; w: 4; ico: ""; cc: "#4e4e4e" }
                ListElement { name: "a"; subname: ""; icon: ""; r: 2; c: 4; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "s"; subname: ""; icon: ""; r: 2; c: 6; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "d"; subname: ""; icon: ""; r: 2; c: 8; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "f"; subname: ""; icon: ""; r: 2; c: 10; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "g"; subname: ""; icon: ""; r: 2; c: 12; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "h"; subname: ""; icon: ""; r: 2; c: 14; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "j"; subname: ""; icon: ""; r: 2; c: 16; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "k"; subname: ""; icon: ""; r: 2; c: 18; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "l"; subname: ""; icon: ""; r: 2; c: 20; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: ";"; subname: ":"; icon: ""; r: 2; c: 22; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "'"; subname: "\""; icon: ""; r: 2; c: 24; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "Enter"; subname: ""; icon: ""; r: 2; c: 26; w: 5; ico: ""; cc: "#4e4e4e" }

                ListElement { name: "Shift"; subname: ""; icon: ""; r: 3; c: 0; w: 5; ico: ""; cc: "#4e4e4e" }
                ListElement { name: "z"; subname: ""; icon: ""; r: 3; c: 5; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "x"; subname: ""; icon: ""; r: 3; c: 7; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "c"; subname: ""; icon: ""; r: 3; c: 9; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "v"; subname: ""; icon: ""; r: 3; c: 11; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "b"; subname: ""; icon: ""; r: 3; c: 13; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "n"; subname: ""; icon: ""; r: 3; c: 15; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "m"; subname: ""; icon: ""; r: 3; c: 17; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: ","; subname: "<"; icon: ""; r: 3; c: 19; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "."; subname: ">"; icon: ""; r: 3; c: 21; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "/"; subname: "?"; icon: ""; r: 3; c: 23; w: 2; ico: ""; cc: "#656565" }
                ListElement { name: "Up"; subname: ""; icon: "\uf106"; r: 3; c: 25; w: 2; ico: ""; cc: "#4e4e4e" } // uf106  uf0d8
                ListElement { name: "Shift"; subname: ""; icon: ""; r: 3; c: 27; w: 4; ico: ""; cc: "#4e4e4e" }

                ListElement { name: "Setting"; subname: ""; icon: "\uf0c9"; r: 4; c: 0; w: 2; ico: ""; cc: "#4e4e4e" }
                ListElement { name: "Lang"; subname: ""; icon: ""; r: 4; c: 2; w: 2; ico: ""; cc: "#4e4e4e" }
                ListElement { name: "Ctrl"; subname: ""; icon: ""; r: 4; c: 4; w: 2; ico: ""; cc: "#4e4e4e" }
                ListElement { name: "Win"; subname: ""; icon: "\uf17a"; r: 4; c: 6; w: 2; ico: ""; cc: "#4e4e4e" }
                ListElement { name: "Alt"; subname: ""; icon: ""; r: 4; c: 8; w: 2; ico: ""; cc: "#4e4e4e" }
                ListElement { name: "Space"; subname: ""; icon: ""; r: 4; c: 10; w: 9; ico: ""; cc: "#656565" }
                ListElement { name: "Alt"; subname: ""; icon: ""; r: 4; c: 19; w: 2; ico: ""; cc: "#4e4e4e" }
                ListElement { name: "Ctrl"; subname: ""; icon: ""; r: 4; c: 21; w: 2; ico: ""; cc: "#4e4e4e" }
                ListElement { name: "Left"; subname: ""; icon: "\uf104"; r: 4; c: 23; w: 2; ico: ""; cc: "#4e4e4e" }  //uf104  uf0d9
                ListElement { name: "Down"; subname: ""; icon: "\uf107"; r: 4; c: 25; w: 2; ico: ""; cc: "#4e4e4e" }  // uf107  uf0d7
                ListElement { name: "Right"; subname: ""; icon: "\uf105"; r: 4; c: 27; w: 2; ico: ""; cc: "#4e4e4e" }  // uf105  uf0da
                ListElement { name: "Close"; subname: ""; icon: "\uf11c;\uf0d7"; r: 4; c: 29; w: 2; ico: ""; cc: "#4e4e4e" }
            }
            Rectangle {
                objectName: name
                width: root.block * w
                height: root.block * 2 * rate
                Layout.columnSpan: w
                Layout.rowSpan: 1
                Layout.row: r
                Layout.column: c
                color: "#393939"
                property var icons: icon.split(';')
                property string firstIcon: icons.length > 0 ? icons[0] : ''
                property int pressed: 0;
                Rectangle {
                    anchors.fill: parent
                    anchors.margins: 1
                    color: background(name, cc, pressed, caps, shift, ctrl, alt)
                    property string oriColor: cc
                    radius: 0
                }
                Text {
                    anchors.centerIn: parent
                    anchors.verticalCenterOffset: icons.length === 2 ? -(root.block * 0.5 * size(name, icons[1]) * 0.12) : 0
                    property string nam: name
                    property string ico: firstIcon
                    text: showName(nam, ico, caps, shift, ctrl, alt)
                    font.family: family(firstIcon)
                    font.pointSize: root.block * 0.5 * size(name, firstIcon)
                    color: "#FFFFFF"
                }
                Text {
                    visible: icons.length === 2
                    anchors.centerIn: parent
                    anchors.verticalCenterOffset: root.block * 0.5 * size(name, icons[1]) * 0.68
                    property string nam: name
                    property string ico: icons[1]
                    text: showName(nam, ico, caps, shift, ctrl, alt)
                    font.family: family(icons[1])
                    font.pointSize: root.block * 0.5 * size(name, icons[1]) * 0.6
                    color: "#FFFFFF"
                }
                Text {
                    anchors.left: parent.left
                    anchors.leftMargin: root.block * 0.25
                    anchors.topMargin: root.block * 0.22
                    anchors.top: parent.top
                    text: subname
                    font.family: "Consolas"
                    font.pointSize: root.block * 0.38
                    color: "#cccccc"
                }

                MouseArea {
                    id: dragRegion
                    anchors.fill: parent
                    property point clickPos: "0,0"
                    onPressed: {
                        clickPos = Qt.point(mouse.x, mouse.y)
                        myDelegate.handleKey(name, parent, 1)
                    }
                    onPositionChanged: {
                        var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
                        myDelegate.move(mainwindow, delta.x, delta.y);
                    }
                    onReleased: {
                        myDelegate.handleKey(name, parent, 0)
                    }
                }

            }
        }
        Component.onCompleted: {
            console.log("very import :::");
            for(var i =0; i<grid.children.length; i++) {
                myDelegate.regist(grid.children[i]);
            }
            myDelegate.loaded(root);
        }
    }

}

